<template>
  <!-- 站内信息 路由组件 -->
  <div class="mine-msg">
    <!-- 操作 清空消息 以及 读取全部消息 -->
    <div class="opertions">
      <div class="el-icon-edit-outline" @click.stop="readAllMsg">全部已读</div>
      <span>&nbsp;&nbsp;&nbsp;</span>
      <el-popconfirm title="结果不可逆,请再次确认" @confirm="DELETEALLMSG">
        <div class="el-icon-delete" @click.stop slot="reference">清空消息</div>
      </el-popconfirm>
    </div>
    <!-- 信息数据展示 -->
    <ul class="msg" v-show="reverseSiteMsg.length">
      <li
        @click="readMsgHandler(msg)"
        class="msg-item"
        v-for="msg in reverseSiteMsg"
        :key="msg['msgId']"
      >
        <el-badge value="new" class="item" v-show="!msg.isRead">
          {{ msg.content }}({{ msg.date | fmtDateTime }})
        </el-badge>
        <div v-show="msg.isRead">
          {{ msg.content }}({{ msg.date | fmtDateTime }})
        </div>
      </li>
    </ul>
    <!-- 空状态 -->
    <EmptyTips v-show="!reverseSiteMsg.length" tips="暂无消息"> </EmptyTips>
  </div>
</template>

<script>
import EmptyTips from "@/components/public/EmptyTips";
import { mapActions, mapGetters, mapMutations } from "vuex";
export default {
  name: "MineMsg",
  components: { EmptyTips },
  computed: {
    ...mapGetters("user", ["reverseSiteMsg"]),
  },

  methods: {
    ...mapMutations("user", ["DELETEALLMSG"]),
    ...mapActions("user", ["updateSiteMsg", "readAllMsg"]),
    readMsgHandler(msg) {
      this.$notify({
        title: "站内消息查看",
        message: msg.content,
        duration: 4000,
        position: "bottom-right",
        customClass: "Notice",
      });
      if (msg.isRead) return;
      msg["isRead"] = true;
      this.updateSiteMsg(msg);
    },
  },
};
</script>

<style lang="less" scoped>
.item {
  margin-top: 10px;
  margin-right: 40px;
}
.mine-msg {
  height: 5rem;
  overflow: auto;
  padding-top: 0.5rem;
  position: relative;
  .opertions {
    position: absolute;
    top: 0;
    right: 0.4rem;
    cursor: pointer;
  }
  .msg {
    .msg-item {
      cursor: pointer;
      margin-bottom: 0.2rem;
    }
  }
}
</style>